<template>
  <div class="shareContainer" ref="shareContainer">
    <div>
      <!-- 按钮 -->
      <div class="sharecontent">
        <div class="sharecontent_header_right">
          <el-button
            type="primary"
            plain
            data-tracker="P38-1"
            @click="handleClick()"
            v-permission="'company_role_create'"
            >新增角色</el-button
          >
        </div>

        <div class="sharecontent_header_left">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="querypage.total"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 表格 -->
      <template>
        <!-- 序号 -->
        <el-table
          border
          stripe
          :data="tableData"
          style="width: 100%"
          :max-height="maxheight"
        >
          <el-table-column type="index" label="序号" width="60" />
          <!-- 角色 -->
          <el-table-column prop="name" label="角色" />
          <el-table-column prop="status" label="角色状态" width="150">
            <template slot-scope="scope">
              {{ scope.row.status === "0" ? "启用" : "禁用" }}
            </template>
          </el-table-column>
          <!-- 描述 -->
          <el-table-column prop="remark" label="描述" />
          <el-table-column label="操作" width="100">
            <template slot-scope="{ row }">
              <el-button
                size="small"
                type="text"
                @click="handleClick(row.id, '1')"
                data-tracker="P38-2"
                v-permission="'company_role_update'"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="PageDeleteRole(row.id)"
                data-tracker="P38-3"
                v-permission="'company_role_delete'"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 权限 -->
      <el-drawer
        title="我是标题"
        :visible.sync="showPermDialog"
        :with-header="false"
        :wrapperClosable="false"
      >
        <div class="header">
          <span class="order-title">分配权限</span>
          <div class="order-right">
            <span class="order-close">
              <i class="el-icon-close" @click="orderclose()" />
            </span>
          </div>
        </div>
        <div class="align_center">
          <span>创建角色:</span>
          <el-form
            ref="beptfrom"
            label-width="100px"
            :model="formData"
            :rules="rules"
          >
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="formData.name" style="width: 80%" />
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
              <el-input v-model="formData.remark" style="width: 80%" />
            </el-form-item>
            <el-form-item label="角色状态" prop="description">
              <el-switch
                v-model="formData.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="0"
                inactive-value="1"
                current-node-key=""
              >
              </el-switch>
            </el-form-item>
          </el-form>
        </div>
        <div class="order_center">
          <span>分配权限:</span>
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :default-checked-keys="formData.menu_ids"
            style="padding-right: 10px"
          >
          </el-tree>
        </div>
        <div style="maring: 0 auto">
          <!-- 代表创建的确定 -->
          <el-button
            type="primary"
            data-tracker="P38-4"
            @click="PageNewlyRole('ruleForm')"
            v-if="orderstate == '0'"
            >确 定</el-button
          >
          <!-- 修改的确定 -->
          <el-button
            type="primary"
            data-tracker="P38-5"
            @click="PageAmenRole('ruleForm')"
            v-if="orderstate == '1'"
            >确 定</el-button
          >
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import {
  roleList,
  NewlyRole,
  AmenRole,
  DeleteRole,
  QueryRole,
  RoleTree,
} from "@/api/organization";
export default {
  data() {
    return {
      maxheight: "auto",
      formData: {
        name: "", //角色名
        remark: "", //备注
        status: "0", //状态
        menu_ids: [], //菜单id
      },
      // 专门接收新增或者编辑的编辑的表单数据
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "部门名称要求1-50个字符",
            trigger: "blur",
          },
        ],
        remark: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "部门编码要求1-50个字符",
            trigger: "blur",
          },
        ],
      },
      querypage: {
        // 放置页码及相关数据
        name: "",
        page: 1,
        page_size: 20,
        total: 0, // 记录总数
      },
      currentPage4: 1,
      showDialog: false, // 弹窗
      showPermDialog: false,
      tableData: [],
      data: [],
      defaultProps: {
        children: "next_level_info",
        label: "name",
      },
      orderstate: "", //新增状态0 编辑状态2
      rowID: "", //修改时候的Id
    };
  },
  computed: {
    showText() {
      return this.formData.id ? "编辑" : "新增";
    },
  },
  created() {
    this.PageroleList();
    // 菜单树
    this.PageRoleTree();
  },
  methods: {
    // 分页
    // 一页有多少条
    handleSizeChange(val) {
      this.querypage.page_size = val;
      //  数据列表接口
      this.PageroleList();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.querypage.page = val;
      //  数据列表接口
      this.PageroleList();
    },
    handleClick(row, type) {
      if (row == undefined) {
        this.orderstate = "0";
        this.BouncedOPen(0);
        this.clearList();
      } else if (row != "" && type == 1) {
        this.orderstate = "1";
        this.rowID = row;
        this.PageQueryRole(row);
        this.BouncedOPen(0);
      }
    },
    orderclose() {
      this.showPermDialog = false;
    },
    // 处理tree 选中的数据
    getCheckedKeys() {
      // 获取选中的子节点
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      // 获取选中的父节点
      let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      // 合并
      let functionIdList = checkedKeys.concat(hafCheckedKeys);
      this.treeListid = functionIdList;
    },
    //  角色列表
    PageroleList() {
      var param = {
        name: this.querypage.name,
        page: this.querypage.page,
        page_size: this.querypage.page_size,
      };
      roleList(param).then((res) => {
        this.tableData = res.data.list;
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 205;
        } else {
          this.maxheight = "auto";
        }
        this.querypage.total = res.data.pagination.total;
      });
    },
    //  新增角色
    PageNewlyRole() {
      this.getCheckedKeys();
      var param = {
        name: this.formData.name,
        status: this.formData.status,
        remark: this.formData.remark,
        menu_ids: this.treeListid,
      };
      NewlyRole(param).then((res) => {
        if (res.code == "10000") {
          this.$message({
            message: "创建角色成功",
            type: "success",
          });
          this.BouncedOPen(1);
          this.PageroleList();
        }
      });
    },
    //  修改角色
    PageAmenRole() {
      this.getCheckedKeys();
      var param = {
        id: this.rowID,
        name: this.formData.name,
        status: this.formData.status,
        remark: this.formData.remark,
        menu_ids: this.treeListid,
      };

      AmenRole(param).then((res) => {
        if (res.code == "10000") {
          this.$message({
            message: "修改角色成功",
            type: "success",
          });
          this.BouncedOPen(1);
          this.PageroleList();
          location.reload();
        }
      });
    },
    // 删除角色
    PageDeleteRole(id) {
      var param = {
        id: [id],
      };
      DeleteRole(param).then((res) => {
        if (res && res.code == "10000") {
          this.$message({
            message: "删除角色成功",
            type: "success",
          });

          this.PageroleList();
        }
      });
    },
    // 查询角色
    PageQueryRole(id) {
      var parem = {
        id: id,
      };
      this.BouncedOPen(0);
      QueryRole(parem).then((res) => {
        var res = res.data;
        var list = [];
        for (var key in res.menu_info_list) {
          list.push(res.menu_info_list[key].id);
        }
        this.formData.name = res.name;
        this.formData.remark = res.remark;
        this.formData.status = res.status;
        this.treemange(list);
      });
    },
    // 处理菜单树的函数
    treemange(list) {
      this.$refs.tree.setCheckedKeys([]);
      list.forEach((i) => {
        // 根据id 拿到 Tree 组件中的node的所有信息
        let node = this.$refs.tree.getNode(i);
        // node.isLeaf：判断当前节点是否为子节点
        if (node.isLeaf) {
          //如果是子节点，就把状态设置成选中
          this.$refs.tree.setChecked(node, true);
        } else {
        }
      });
    },
    // 菜单树
    PageRoleTree() {
      var parem = {
        pid: 0,
      };
      RoleTree(parem).then((res) => {
        this.data = res.data;
      });
    },
    // 弹框的显示与隐藏
    BouncedOPen(val) {
      switch (val) {
        // 0 是开启 1关闭
        case 0:
          this.showPermDialog = true;
          break;
        case 1:
          this.showPermDialog = false;
          break;
      }
    },
    clearList() {
      this.formData = {
        name: "", //角色名
        remark: "", //备注
        status: "1", //状态
        menu_ids: [], //菜单id
      };
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([]);
      });
    },
  },
};
</script>
<style scoped lang="less">
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;
  .sharecontent {
    background: white;

    .sharecontent_header_right {
      margin: 0px 0px 10px 0px;
      display: inline-block;
    }

    .sharecontent_header_left {
      float: right;
      padding: 0px 10px 0px 0px;
    }
  }
}

.header {
  width: 100%;
  height: 36px;
  background: #5a6d82;
  line-height: 36px;

  .order-title {
    color: #fff;
    font-size: 14px;
    padding-left: 12px;
  }

  .order-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 35px;
    line-height: 35px;

    .order-close {
      height: 35px;
      display: inline-block;
      overflow: hidden;
      position: relative;
      padding: 0 10px;
      cursor: pointer;
      color: #fff;
    }
  }
}

.align_center {
  width: 99%;
  margin: 8px auto;
}

.order_center {
  width: 99%;
  margin: 8px auto;
}
</style>
